<template>
	<view :class="pageClass" :style="pageStyle" v-if="pageReady">

		<moxi-nav :set="navSet"></moxi-nav>
		<template v-for="(list,key) in modData">
			<moxi-index v-if="list.name=='mingpian'" :list="list" :class="list.mod_class" :key="key" :style="list.css">
				<view class="mingpian" v-if="info.id" :style="list.set.reversal==1?'flex-direction: row-reverse;':''">
					<view class="con-1 con" v-if="list.set.style==2" :style="'width: '+list.set.icon_width+'%'">
						<img class="user_pic" :src="info.user_pic" mode="aspectFill">
					</view>
					<img class="user_pic" v-if="list.set.style==1"
						:style="'position: absolute;right: 10px;top: 20px;border-radius: '+list.set.radius+'px;'"
						:src="info.user_pic" mode="aspectFill">
					<view class="con-2 con"
						:style="list.set.style==2?'width: '+(100-Number(list.set.icon_width))+'%;':'width:100%'">
						<text class="u-line-2 qiye" :style="'color:'+list.set.title_color">{{info.qiye}}</text>
						<view class="name">
							<h2 :style="'color: '+list.set.name_color">{{info.name}}</h2>
							<text class="zhiwei" :style="'color: '+color(list.set.name_color)">{{info.position}}</text>

						</view>
						<view class="info">
							<view class="info-list">
								<u-icon name="phone" size="18" :color="list.set.icon_color"></u-icon>
								<text class="info-con" :style="'color: '+list.set.font_color">{{info.tel}}</text>
							</view>
							<view class="info-list" v-if="info.email.length">
								<u-icon name="email" size="18" :color="list.set.icon_color"></u-icon>
								<text class="info-con" :style="'color: '+list.set.font_color">
									{{info.email}}</text>
							</view>
							<view class="info-list">
								<u-icon name="map" size="18" :color="list.set.icon_color"></u-icon>
								<text class="info-con" :style="'color: '+list.set.font_color">
									{{info.address.address}}</text>
							</view>
						</view>
					</view>
				</view>




			</moxi-index>
			<moxi-index v-else-if="list.name=='mingpian_info'" :list="list" :class="list.mod_class" :key="key"
				:style="list.css">
				<view id="mingpian_info" :class="list.mod_class" v-if="list.set.font_tab==1">

					<!-- #ifdef MP-WEIXIN -->
					<view class="info-list-tab" @click="getcode()">
						<u-icon name="grid" size="18" :color="list.set.font_color"></u-icon>
						<text class="info-name" :style="'color: '+list.set.font_color">名片码</text>
					</view>
					<span :style="'color: '+color(list.set.font_color)">|</span>
					<!-- #endif -->

					<view class="info-list-tab" @click="call()">
						<u-icon name="phone" size="18" :color="list.set.font_color"></u-icon>
						<text class="info-name" :style="'color: '+list.set.font_color">打电话</text>
					</view>
					<span :style="'color: '+color(list.set.font_color)">|</span>
					<view class="info-list-tab" @click="paste(list.wx)">
						<u-icon name="chat" size="18" :color="list.set.font_color"></u-icon>
						<text class="info-name" :style="'color: '+list.set.font_color">加微信</text>
					</view>
					<span :style="'color: '+color(list.set.font_color)">|</span>
					<view class="info-list-tab" @click="map()">
						<u-icon name="map" size="18" :color="list.set.font_color"></u-icon>
						<text class="info-name" :style="'color: '+list.set.font_color">查导航</text>
					</view>
				</view>
				<view class="btn-box" v-if="list.set.btn==1&&info.uid">
					<u-button class="btn" text="分享名片" open-type="share" :shape="list.set.btn_style" :plain="true"
						:color="list.set.btn_color" style="position: relative;">
					</u-button>
					<view style="width: 40px;"></view>
					<u-button @click="edit= true" v-if="info.uid&&userinfo.id&&info.uid==userinfo.id" class="btn"
						text="编辑名片" :shape="list.set.btn_style" :color="list.set.btn_color"></u-button>
					<u-button @click="tx()" v-else class="btn" text="存入通讯录" :shape="list.set.btn_style"
						:color="list.set.btn_color"></u-button>

				</view>
				<view v-if="info.uid&&userinfo.id&&info.uid==userinfo.id" style="padding:0 10px; margin-bottom: 10px;">
					<u-button @click="blog()" class="btn" text="访问记录" :shape="list.set.btn_style"
						:color="list.set.btn_color"></u-button>
				</view>
			</moxi-index>
			<moxi-index v-else-if="list.name=='mingpian_desc'" :list="list" :class="list.mod_class" :key="key"
				:style="list.css">
				<view v-if="info.desc&&info.desc.length"
					style="white-space: pre-wrap;word-wrap: break-word;font-size: 14px;color: #222;">
					<u-parse :content="info.desc"></u-parse>
				</view>
			</moxi-index>
			<moxi-index v-else-if="list.name=='plugin_mingpian_showbox'&&(info.video||info.pic)" :list="list"
				:class="list.mod_class" :key="key" :style="list.css">
				<video controls :poster="info.pic" class="video_list"
				 object-fit="fill"
				 :style="{height:getHeight()}"
					:autoplay="list.set.auto?true:false" :src="info.video" v-if="info.video"></video>
				<image mode="aspectFill" src="info.pic" v-else></image>
			</moxi-index>
			<moxi-index v-else :list="list"></moxi-index>
		</template>

		<u-popup :show="edit" @close="edit = !edit" round="10">
			<view style="height: 70vh;overflow: auto;padding: 10px;">
				<view class="text_title">姓名：</view>
				<u--input placeholder="请输入您的姓名" border="surround" v-model="info.name"></u--input>
				<view class="text_title">电话：</view>
				<u--input placeholder="请输入您的手机号码" border="surround" v-model="info.phone"></u--input>
				<view class="text_title">微信：</view>
				<u--input placeholder="请输入您的微信号" border="surround" v-model="info.wx"></u--input>
				<view class="text_title">邮箱：</view>
				<u--input placeholder="请输入您的邮箱地址" border="surround" v-model="info.email"></u--input>
				<view class="text_title">简介：</view>
				<u--textarea v-model="info.desc" placeholder="请自我介绍下吧" autoHeight></u--textarea>
				<view class="text_title">封面图：</view>
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1"
					multiple :previewFullImage="true"></u-upload>
				<view class="video_title">上传视频：</view>
				<u-upload :fileList="fileList2" @afterRead="afterRead2" @delete="deletePic2" name="2" multiple
					:maxCount="1" accept="video"></u-upload>
				<u-button text="保存设置" @click="save()" type="primary"></u-button>
			</view>
		</u-popup>

		<u-popup :show="logBox" @close="logBox = !logBox" round="10">
			<view style="height: 70vh;overflow: auto;padding: 10px;display: flex;flex-direction: column;">
				<u-list @scrolltolower="scrolltolower">
					<view v-for="l in log" class="visitorLog">
						<image :src="l.user.pic" mode="aspectFill" style="width: 60px;height: 60px;border-radius: 4px;">
						</image>
						<view
							style="margin-left: 10px;display: flex;flex-direction: column;justify-content: space-between;position: relative;">
							<text v-if="l.user.showname">{{l.user.showname}}</text>
							<text v-else>{{l.user.username}}</text>
							<text style="font-size: 13px;;">浏览时间：
								<text style="display: inline-block;">{{l.time | date('yyyy年mm月dd日')}}</text>
							</text>
						</view>
					</view>
				</u-list>
			</view> 
		</u-popup>
		<u-overlay :show="showCode" @click="showCode = false">
			<view v-if="info.id" style="width: 100%;height: 100%;display: flex;
		flex-direction: column;justify-content: center;text-align: center;align-items: center;">
				<view
					style="width: 600rpx;height: 66%;border-radius: 4px;
			background: linear-gradient(to top,#55aaff,#69c3ff);display: flex;flex-direction: column;justify-content: space-between;">
					<view style="display: flex;flex-direction: column;">
						<img :src="info.user_pic" alt=""
							style="width: 100px;height: 100px;object-fit: cover;border-radius: 100px;margin: 0 auto;margin-top: -50px;border: 3px #fff solid;">
						<text style="color: #fff;margin: 5px 0;font-size: 18px;">{{info.name}}</text>
						<text style="color: #e8e8e8;font-size: 12px;">{{info.position}}</text>
					</view>
					<view style="display: flex;flex-direction: column;text-align: center;align-items: center;">
						<img style="max-width: 400rpx;height: 400rpx; border-radius: 10px;object-fit: cover;"
							:src="mp_code" alt="">
						<text style="color: #fff;margin-top: 5px;font-size: 14px;;">扫码进入我的名片</text>
					</view>
					<view
						style="align-items: center;text-align: center;display: flex;flex-direction: column;margin-bottom: 20px;">
						<view style="width: 80%;">
							<u-button type="primary" icon="share" open-type="share" shape="circle"
								text="分享名片"></u-button>
						</view>
					</view>
				</view>
			</view>
		</u-overlay>
		<moxi-tabbar :set="tabbar" v-if="tabbar.index_id"></moxi-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showCode: false,
				info: {},
				mp_code: "",
				edit: false,
				fileList1: [],
				fileList2: [],
				logBox: false,
				log: [],
				hasMore: true,
				pageInfo: {
					page: 1,
					page_num: 10,
					data: [],
				},
			}
		},
		created() {



		},
		mounted() {
		
			if (this.param.id) {
				let self = this;
				let uniid = uni.getStorageSync('mingpian_uniid');
				if (!uniid) {
					uniid = uni.getSystemInfoSync().deviceId;
					uni.setStorageSync('mingpian_uniid', uniid);
				}
				this.moxiPost('/plugin/mingpian/index/mingpian/info', {
					id: this.param.id,
					uniid: uniid
				}, function(data) {
					self.info = data.data;
					self.fileList1.push({
						url: self.info.pic
					})
					uni.setNavigationBarTitle({
						title: '我是' + data.data.qiye + "的" + data.data.name + '，这是我的名片！'
					});
				})
			} else {
				console.log('缺少ID参数');
			}

		},
		methods: {
			getHeight(list){
				if(list.isCustom==0){
					return 'auto';
				}
				if(list.unit=='vh'){
					return list.vh_height+'vh';
				}else{
					return list.rpx_height+'rpx';
				}
			},
			// 触底加载新内容
			scrolltolower() {
				if (this.hasMore) {
					this.pageInfo.page++;
					this.blog();
				}
			},
			// 获取内容
			blog() {
				let self = this;
				this.moxiPost('/plugin/mingpian/user/mingpian/log', this.pageInfo, function(data) {
					if (data.data.allpage <= self.pageInfo.page) {
						self.hasMore = false;
					}
					self.logBox = true;
					for (let k in data.data.data) {
						self.log.push(data.data.data[k])
					}
				})
			},
			save() {
				let self = this;
				console.log('this.info ==>', this.info);
				this.moxiPost('/plugin/mingpian/user/mingpian/edit', this.info, function(data) {
					self.edit = false
					this.msg('保存成功')
				})
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					this.info.pic = result;
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			// 新增视频
			async afterRead2(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					this.info.video = result;
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					this.moxiUpload(url, function(data) {
						resolve(data)
					})
				})
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			deletePic2(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			tx() {
				uni.addPhoneContact({
					nickName: this.info.name,
					organization: this.info.qiye,
					firstName: this.info.name,
					title: this.info.position,
					hostNumber: this.info.tel,
					remark: '名片自动导入',
					mobilePhoneNumber: this.info.phone,
					weChatNumber: this.info.ex,
					email: this.info.email,
					success: function() {
						this.msg('添加联系人成功')
					},
					fail: function() {
						console.log('fail');
					}
				});
			},
			map() {
				if (this.info.address && this.info.address.center && this.info.address.center[1]) {
					uni.openLocation({
						latitude: this.info.address.center[1],
						longitude: this.info.address.center[0],
						name:"公司位置",
						address:this.info.address.address,
						success: function() {
							
						}
					});
				} else {
					this.msg('未设置地图')
				}

			},
			paste(value) {
				uni.setClipboardData({
					data: value
				});
				this.msg('已复制微信号')
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.info.tel
				});
			},
			getcode() { //微信小程序获取二维码
				let self = this;
				this.moxiPost('/index/app/mp_code', {
					page: this.get_cur_page()
				}, function(data) {
					self.showCode = true;
					self.mp_code = data.data;
				
				})
			},
			color(v) {
				return uni.$u.colorToRgba(v, 0.7);
			}
		}
	}
</script>

<style lang="scss">
	::v-deep .u-list {
		height: 100% !important;
	}

.video_list{width: 100%;}
	.visitorLog {
		display: flex;
		flex-direction: row;
		padding: 16px 10px;
		border-bottom: 1px solid #eee;
		border-radius: 5px;

		&:nth-last-child(1) {
			border: none;
		}
	}

	.btn-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 10px;
	}

	#mingpian_info {
		display: flex;
		margin: 10px;
		flex-direction: row;
		justify-content: space-between;
	}

	#mingpian_info span {
		font-size: 12px;
		color: #cacaca
	}

	.info-list-tab {
		display: flex;
		flex-direction: row;
		text-align: center;
	}

	.info-name {
		font-size: 14px;
		color: #222
	}

	.zhiwei {
		margin-left: 8px;
		font-size: 13px;
		color: #666;
		margin-top: 12px;
	}

	.qiye {
		font-weight: 500;
		color: #333;
	}

	.name {
		display: flex;
		flex-direction: row;
	}

	.name h2 {
		font-size: 24px;
	}

	.mingpian {
		display: flex;
		flex-direction: row;
		min-height: 360rpx;
		position: relative;
		justify-content: space-between;
	}

	.user_pic {
		max-width: 70px;
		max-height: 70px;
		border-radius: 100px;
		object-fit: cover;
		border: 3px #fff solid;
	}

	.con-1 {
		width: 30%;
		justify-content: center;
		text-align: center;
		align-items: center;
		display: flex;
		flex-direction: column;
	}

	.con-2 {
		white-space: break-spaces;
		width: 70%;
		padding: 10px;
		justify-content: space-between;
		word-wrap: break-word;
		display: flex;
		flex-direction: column;
	}

	.info {
		display: flex;
		flex-direction: column;
	}

	.info .info-list {
		display: flex;
		flex-direction: row;
		margin: 2px 0;
	}

	.info .info-con {
		margin-left: 5px;
		font-size: 14px;
	}

	.text_title {
		color: #666;
		margin: 10px 0;
		font-size: 14px;
		margin-bottom: 6px;
	}
</style>